<template>
  <div>
      <div class="login">
    <van-nav-bar
  title="注册账号"
  left-arrow
  @click-left="$router.push('/login')"
  />
  <van-form @submit="onSubmit">
  <van-field
    v-model="userInfo.username"
    type="tel"
    name="用户名"
    placeholder="请输入电话号码"
  />
  <van-field
    v-model="userInfo.password"
    type="password"
    name="密码"
    placeholder="请输入密码"
  />
   <van-field
    v-model="userInfo.confirmPassword"
    type="password"
    name="密码"
    placeholder="确认密码"
  />

  <div style="margin: 16px;">
    <van-button  block type="info" native-type="submit">注册</van-button>
  </div>
</van-form>
<router-link to="/login">已有账号，去登录~</router-link>
  </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data () {
    return {
      userInfo: {
        username: '',
        password: '',
        confirmPassword: ''

      }

    }
  },

  methods: {
    onSubmit (value) {
      // console.log(value)
    }
  }

}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar .van-icon{
  color: #fff;
}
/deep/ .van-button--info {
    background-color: #43b978;
    border: 0.02667rem solid #43b978;
}
.van-field{
  height: 60px;
  font-size: 17px;
  padding: 0 20px ;
  width: 100%;
  margin: 20px 0;
}
.van-cell{
  line-height:60px;
}
/deep/ .van-cell::after{
  border-bottom: 0.02667rem solid #c7d2e0
}
.van-button{
    font-size: 18px;
    height: 50px;
    line-height: 50px;
    margin-bottom: 20px;
}

.login{
  text-align: center;
      a{
     font-size: 14px;
      color: #666;
    }
}
</style>
